<template>
  <div>
    <v-app>
        <v-form v-model="valid" class="my-form">
          <div>
            <v-text-field
              v-model="firstname"
              :rules="nameRules"
              label="订单号"
              required
            ></v-text-field>
          </div>
          <div>
            <v-text-field
              v-model="lastname"
              :rules="nameRules"
              :counter="10"
              label="Last name"
              required
            ></v-text-field>
          </div>
          <div>
            <v-text-field
              v-model="email"
              :rules="emailRules"
              label="E-mail"
              required
            ></v-text-field>
          </div>
        </v-form>
        <div class="loading" v-loading="loading">测试</div>
  </v-app>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      loading: true,
      valid: false,
      firstname: '',
      lastname: '',
      nameRules: [
        v => !!v || '必须输入',
        v => v.length <= 10 || 'Name must be less than 10 characters'
      ],
      email: '',
      emailRules: [
        v => !!v || 'E-mail is required',
        v => /.+@.+/.test(v) || 'E-mail must be valid'
      ]
    }
  },
  methods: {
  },
  created () {
  }
}
</script>
<style lang="scss">
  .my-form .v-text-field__slot {
    border: 1px solid;
    border-radius: 4px;
    padding: 0 10px;
  }
  .my-form .v-input__slot::before {
    display: none;
  }
  .my-form .v-input__slot::after {
    display: none;
  }
  .my-form .theme--light {
    left: 10px !important;
    padding: 0 4px;
    background-color: #ffffff;
  }
  .my-form .v-label--active.theme--light {
    top: 10px !important;
  }
  .loading {
    height: 300px;
    width: 600px;
  }
</style>
